@@include('../00.global/include-header.html')
     
  <body class="page">
  
  
          
    @@include('../00.global/include-loader.html')
    
    

  
  
    <div class="wrapper">
    
        <!-- Header Area
        ============================================= -->      
        <header class="header-area transition">
            
             <div class="header-container transition">
                 <div class="container">
                 
                        @@include('../00.global/include-brand.html')
                        
                        @@include('../00.global/include-menu.html')
                        
                        
                        
                        
                  </div>
                  <!-- .container end -->
                  
                  <div class="clear"></div>
             </div>
        
        </header>
        <div class="header-inner"></div>
      
      
     
        <!-- Content 01
        ====================================================== -->
        <section class="space-none">
            <div class="container t-c">
                    <div class="row">
                        <div class="col-md-8 col-md-offset-2 t-c">
                            <h2>Ajax Load Posts</h2>
                            
                        </div>
                    </div>
                    <!-- .row end -->
              
                    
            </div>
            <!-- .container end -->
 
        </section>
     
       
    
       <!-- Content 02
        ====================================================== -->
        <section>
            <div class="container">
                    <div class="row">
                        <div class="col-md-12 transition">
                        
							<div class="list-topic-container"
							     data-ajax-list-json="assets/json/content-posts.php" 
							     data-ajax-list-method="POST" 
							     data-ajax-list-temp-id="list-topic-ajax-template-1" 
							     data-ajax-list-page-now="1" 
							     data-ajax-list-page-per="8" 
							     data-ajax-list-page-total="-1" 
							     data-ajax-list-trigger="#ajax-loadmore-btn-1" 
							     data-ajax-list-trigger-active-class=".active" 
							     data-ajax-list-push-container-class=".list-topic-items-ajax-container" 
							     data-ajax-list-infinitescroll="false"
							     data-ajax-list-field-name1="Custom String 1"
							     data-ajax-list-field-name2="Custom String 2">


									<!-- List Item -->
									<div class="list-topic-item style-2">
										<div class="row">
											<div class="col-md-4 list-topic-item-img transition">
												<a href="#"> 
													<img src="assets-demo/images/test-img-big-1.jpg" alt="" />
												</a>
											</div><!-- /.col-md-4 -->
											
											
											<div class="col-md-8">

											    <div class="list-topic-item-info transition">
											        <div class="row">
											        
														<div class="col-md-5">

															<h3>
																 <a href="#">
																	 Project Title Here
																 </a>
															</h3>
														</div>


														<div class="col-md-7">

														    <div class="row">
																<div class="col-md-5">
																	<p><strong>Author:</strong> David</p>
																	<p><strong>Date:</strong> December 10, 2017</p>
																</div>


																<div class="col-md-7">
																	<p><strong>Comments:</strong> 20</p>
																	<p><strong>Categories:</strong> Art, Design</p>
																</div>												    
															</div><!-- .row  end -->


														</div>	
														  
													</div><!-- .row  end -->

											    
												</div><!-- /.list-topic-item-info -->


												<div class="clear"></div>


											</div><!-- /.col-md-8 -->
												
											<!-- ///////  -->
											
											<div class="col-md-4">
												
											</div><!-- /.col-md-4 -->
											<div class="col-md-8 detail list-normal table-normal">

													<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
											
												 <div class="tags-box">
													 <a href="#">Tag</a>
													 <a href="#">Video</a>
													 <a href="#">Web Design</a>
												 </div>

											</div><!-- /.col-md-8 -->
											
										</div>
										<!-- .row  end -->
										
										
										
									</div>
									<!-- List Item  end --> 
								
					
						
									<!-- List Item -->
									<div class="list-topic-item style-2">
										<div class="row">
											<div class="col-md-4 list-topic-item-img transition">
												<a href="#"> 
													<img src="assets-demo/images/test-img-big-2.jpg" alt="" />
												</a>
											</div><!-- /.col-md-4 -->
											
											
											<div class="col-md-8">

											    <div class="list-topic-item-info transition">
											        <div class="row">
											        
														<div class="col-md-5">

															<h3>
																 <a href="#">
																	 Project Title Here
																 </a>
															</h3>
														</div>


														<div class="col-md-7">

														    <div class="row">
																<div class="col-md-5">
																	<p><strong>Author:</strong> David</p>
																	<p><strong>Date:</strong> December 10, 2017</p>
																</div>


																<div class="col-md-7">
																	<p><strong>Comments:</strong> 20</p>
																	<p><strong>Categories:</strong> Art, Design</p>
																</div>												    
															</div><!-- .row  end -->


														</div>	
														  
													</div><!-- .row  end -->

											    
												</div><!-- /.list-topic-item-info -->


												<div class="clear"></div>


											</div><!-- /.col-md-8 -->
												
											<!-- ///////  -->
											
											<div class="col-md-4">
												
											</div><!-- /.col-md-4 -->
											<div class="col-md-8 detail list-normal table-normal">

													<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
											
												 <div class="tags-box">
													 <a href="#">Tag</a>
													 <a href="#">Video</a>
													 <a href="#">Web Design</a>
												 </div>

											</div><!-- /.col-md-8 -->
											
										</div>
										<!-- .row  end -->
										
										
										
									</div>
									<!-- List Item  end --> 
						
						
						
						
						
									<!-- List Item -->
									<div class="list-topic-item style-2">
										<div class="row">
											<div class="col-md-4 list-topic-item-img transition">
												<a href="#"> 
													<img src="assets-demo/images/test-img-big-3.jpg" alt="" />
												</a>
											</div><!-- /.col-md-4 -->
											
											
											<div class="col-md-8">

											    <div class="list-topic-item-info transition">
											        <div class="row">
											        
														<div class="col-md-5">

															<h3>
																 <a href="#">
																	 Project Title Here
																 </a>
															</h3>
														</div>


														<div class="col-md-7">

														    <div class="row">
																<div class="col-md-5">
																	<p><strong>Author:</strong> David</p>
																	<p><strong>Date:</strong> December 10, 2017</p>
																</div>


																<div class="col-md-7">
																	<p><strong>Comments:</strong> 20</p>
																	<p><strong>Categories:</strong> Art, Design</p>
																</div>												    
															</div><!-- .row  end -->


														</div>	
														  
													</div><!-- .row  end -->

											    
												</div><!-- /.list-topic-item-info -->


												<div class="clear"></div>


											</div><!-- /.col-md-8 -->
												
											<!-- ///////  -->
											
											<div class="col-md-4">
												
											</div><!-- /.col-md-4 -->
											<div class="col-md-8 detail list-normal table-normal">

													<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac.</p>
													
													 <p>People think focus means saying yes to the thing you&#8217;ve got to focus on. But that&#8217;s not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully. I&#8217;m actually as proud of the things we haven&#8217;t done as the things I have done. Innovation is saying no to 1,000 things. <cite>Steve Jobs &#8211; Apple Worldwide Developers&#8217; Conference, 1997</cite></p>
													<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper.</p>
													<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac.</p>
													
											
												 <div class="tags-box">
													 <a href="#">Tag</a>
													 <a href="#">Video</a>
													 <a href="#">Web Design</a>
												 </div>

											</div><!-- /.col-md-8 -->
											
										</div>
										<!-- .row  end -->
										
										
										
									</div>
									<!-- List Item  end --> 
								
						
						
						            <div class="list-topic-items-ajax-container"></div>
									<script id="list-topic-ajax-template-1" type="text/template7">
									
									    {{#each items}}
										
										
											<!-- List Item -->
											<div class="list-topic-item style-2">
												<div class="row">
													<div class="col-md-4 list-topic-item-img transition">
														<a href="{{link}}"> 
															<img src="{{img}}" alt="" />
														</a>
													</div><!-- /.col-md-4 -->


													<div class="col-md-8">

														<div class="list-topic-item-info transition">
															<div class="row">

																<div class="col-md-5">

																	<h3>
																		 <a href="{{link}}">
																			 {{title}}
																		 </a>
																	</h3>
																</div>


																<div class="col-md-7">

																	<div class="row">
																		<div class="col-md-5">
																			<p><strong>Author:</strong> {{author}}</p>
																			<p><strong>Date:</strong> {{time}}</p>
																		</div>


																		<div class="col-md-7">
																			<p><strong>Comments:</strong> {{comments}}</p>
																			<p><strong>Categories:</strong> {{cat}}</p>
																		</div>												    
																	</div><!-- .row  end -->


																</div>	

															</div><!-- .row  end -->


														</div><!-- /.list-topic-item-info -->


														<div class="clear"></div>


													</div><!-- /.col-md-8 -->

													<!-- ///////  -->

													<div class="col-md-4">

													</div><!-- /.col-md-4 -->
													<div class="col-md-8 detail list-normal table-normal">

															<p>{{detail}}</p>

														 <div class="tags-box">
															 {{tags}}
														 </div>

													</div><!-- /.col-md-8 -->

												</div>
												<!-- .row  end -->



											</div>
											<!-- List Item  end --> 

	
										
										{{/each}}

									</script>  
                                  
									
						
						
						
						
							</div><!-- /.list-topic-container -->
                       
                       
                        </div>
                        <!-- .col-md-12 end -->
                    </div>
                    <!-- .row end -->
                    
                    
                      
                    <p class="t-c">
                        <a id="ajax-loadmore-btn-1" href="javascript:void(0)" class="button button-hover button-border-thin button-size-s button-bg-primary button-radius">Load More</a>
				    </p>
                    
            </div>
            <!-- .container end -->
            
            
            
 
        </section>
        
         
      
        
        
        
        
        @@include('../00.global/include-copyright.html')
        
        
    </div>
    <!-- .wrapper end -->
       
       
    @@include('../00.global/include-footer.html')

